<script   setup>
import { ref,reactive,watch,watchEffect,computed,onMounted} from 'vue'
import axios from 'axios'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { Search,Plus } from "@element-plus/icons-vue";
import { RefreshRight } from "@element-plus/icons-vue";

// 加载数据
const initList = async()=>{
    console.log("拿数据")
    axios.get("/api/category/list/"+pagination.currentPage+"/"+pagination.pageSize).then((res)=>{
    tableData.value = res.data.data
    pagination.total = res.data.page.total
    pagination.currentPage = res.data.page.pageNum
    pagination.pageSize = res.data.page.pageSize
    })
}
// 起始加载
onMounted(()=>{
    console.log("onMounted开始加载数据")
    // axios.get("/api/question/list/"+pagination.currentPage+"/"+pagination.pageSize).then(res=>{
  axios.get('/api/question/list/1/7').then(res=>{
    tableData.value = res.data.data
    console.log(tableData.value)
    pagination.total = res.data.page.total
    pagination.currentPage = res.data.page.pageNum
    pagination.pageSize = res.data.page.pageSize
    })

    // axios.get("/Api/category/lev1").then((res)=>{
    // tableData1.value = res.data
    // console.log(tableData1.value)
    // })

    // axios.get("/Api/category/lev2").then((res)=>{
    // tableData2.value = res.data
    // console.log(tableData2.value)
    // })
})
//编辑
const handleEdit = (index, row) => {
   dialogFormVisible1.value = true;
    f2.value = row.questionCategoryName
    fid.value = row.questionCategoryId
//   console.log( row.questionCategoryId)
}

let fenter = () => {
  dialogFormVisible1.value = false
  axios.put("/api/category/update",{questionCategoryName:f2.value,questionCategoryId:fid.value}).then((res) => {
    if(res.data ==true){
      ElMessage({
      message: '修改成功.',
      type: 'success',
      })
    }else{
      ElMessage({
      message: '修改失败.',
      type: 'error',
      })
    }
  })
}
let fcencel = ()=> {
  dialogFormVisible1.value = false
  ElMessage({
      message: '取消操作.',
      })
}
// 删除
// const handleDelete = (index: number, row: category) => {
//   console.log(index, row)
  
// }
// 删除
const confirmEvent = (index, row) => {
  console.log(row.questionCategoryId)
  axios.delete("/api/category/delete/"+row.questionCategoryId).then((res) => {
    if(res.data==true){
      ElMessage({
      message: '删除成功.',
      type: 'success',
      })
    }else{
      ElMessage({
      message: '删除失败，数据或许不存在.',
      type: 'error',
      })
    }
  })
  
}
const cancelEvent = () => {
  console.log('cancel!')
   ElMessage('取消了操作.')
}

// 声明响应式数组
let tableData = ref()
let tableData1 = ref()
let tableData2 = ref()
let tableData22 = ref()
let tableData3 = ref()
// 选择框
const value = ref('')
const valueS1 = ref('')
const valueS2 = ref('')
const valueS2After = ref('')
const valueA1 = ref('')
//新增分类
let openSelect2 = () =>{
  dialogFormVisible.value = true
  valueS1.value = ''
  valueS2.value = ''
}

let addNew = () => {
  axios.get("/api/category/getId?name="+valueS2.value).then((res) => {
    console.log(res.data)
    axios.post("/api/category/add",{questionCategoryName:valueA1.value,questionCategoryParentId:res.data})
    .then((res) => {
      console.log(res)
    })
  })
  dialogFormVisible.value = false;
  ElMessage({
      message: '添加成功.',
      type: 'success',
      })
}
let addNewCancel = () => {
  dialogFormVisible.value = false;
  ElMessage({
      message: '取消了操作.',
    
      })
}

const options = [
  {
    value: '0',
    label: '所有分类',
  },
  {
    value: 'lev1',
    label: '一级分类',
  },
  {
    value: 'lev2',
    label: '二级分类',
  },
  {
    value: 'lev3',
    label: '三级分类',
  },
]
// 输入框
const input = ref('')
// 开关
const value1 = ref(true)
const sta = ref(1)
let switchChange = (row) => {
    console.log(row.status)
}
// 分页
const pagination = reactive({
      currentPage:1,
      pageSize:7,
      total:0
      })
// 换页
let handleCurentChange = (currentPage) => {
    if(input.value == "" && value.value==0){
      pagination.currentPage = currentPage;
      initList()
    }else if(input.value != "") {
      console.log("输入框带参换页")
      pagination.currentPage = currentPage;
      console.log(currentPage)
      query()
    }else if(value.value!=0){
      console.log("选择框带参换页")
      pagination.currentPage = currentPage;
      console.log(currentPage)
      selectChange()
    }

}
// 新增弹窗
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 表格隔行变色
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex%2==1 ) {
    return {
      backgroundColor: '#E6E8EB',
      
    }
  }
  
}
// 输入框模糊查询
let query = ()=> {
  console.log(input.value)
  let s = input.value
  axios.get("/api/category/like/"+pagination.currentPage+"?queryName="+s).then((res)=>{
    // console.log(res)
  tableData.value = res.data.data
  // console.log(tableData.value)
  pagination.total = res.data.page.total
  pagination.currentPage = res.data.page.pageNum
  pagination.pageSize = res.data.page.pageSize
  
  })
}
// 重置
let rest = () => {
  input.value = ""
  initList()
}
//  选择框改变
let selectChange = () =>{
    if(value.value==0){
      initList()
    }else{
      axios.get("/api/category/"+value.value+"/"+pagination.currentPage+"/"+pagination.pageSize).then((res)=>{
      tableData.value = res.data.data
      pagination.total = res.data.page.total
      pagination.currentPage = res.data.page.pageNum
      pagination.pageSize = res.data.page.pageSize
     })  
    }
    // console.log(tableData.value)
    // pagination.total = res.data.page.total
    // pagination.currentPage = res.data.page.pageNum
    // pagination.pageSize = res.data.page.pageSize
    
}
// 监听
watch(valueS1,(newVal,oldVal)=>{
    if(newVal=="财会类考试"){
      tableData22.value = tableData2.value
    }else{
      tableData22.value = ''
      valueS2.value = ''
    }
  })
// 新增表单
const f2 = ref()
const f2s = ref()
const fid = ref()
</script>

<template>
    
     <!-- 选择框 -->
    &nbsp;&nbsp;  <el-select @change="selectChange(value)" v-model="value" class="m-2" placeholder="请选择问题类型=" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
    <!-- 输入框 -->
    &nbsp;&nbsp;
    <el-input
      v-model="input"
      class="w-50 m-2"
      size="large"
      style="width:270px"
      placeholder="请输入要查询的问题"
    />
    <!-- 按钮 -->
    &nbsp;&nbsp;
    <el-button type="primary"  size="default" @click="query"><el-icon><Search /></el-icon>&nbsp;搜索</el-button>
    <el-button size="default" @click="rest"><el-icon><RefreshRight /></el-icon>&nbsp;重置</el-button>
    <el-button type="success"  @click="openSelect2" size="default" class="ad"><el-icon><Plus /></el-icon>&nbsp;新增分类</el-button>
     <!-- Form -->
    <el-dialog v-model="dialogFormVisible" title="新增问题分类">
      <el-form >
        <el-form-item label="问题分类名称：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="valueA1" />
        </el-form-item>
        <el-form-item label="请选择分类别：" :label-width="formLabelWidth">
          <el-select placeholder="分类列表" v-model="valueS1">
            <el-option
              v-for="item in tableData1"
              :key="item.questionCategoryName"
              :label="item.label"
              :value="item.questionCategoryName"
            /> 
          </el-select>
        </el-form-item>
        <el-form-item label="请选择次级分类：" :label-width="formLabelWidth">
          <el-select placeholder="分类列表" v-model="valueS2">
            <el-option
              v-for="item in tableData22"
              :key="item.questionCategoryName"
              :label="item.label"
              :value="item.questionCategoryName"
            /> 
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addNewCancel">取消</el-button>
          <el-button type="primary" @click="addNew"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>

    <br><br><el-table  :cell-style="cellStyle"  :data="tableData" border style="width: 100%;font-size: 16px;font-weight:700" class="ta">
    <el-table-column min-width="27%" label="批量删除">
   
      <el-checkbox  size="large" />
    
    </el-table-column>
    <el-table-column label="问题序号" prop="questionId" />
    <el-table-column label="问题标题" prop="questionTitle" />
    <el-table-column label="问题类型" prop="questionTypeId" />
    <el-table-column label="问题创建日期" prop="questionDate" />
    <el-table-column label="问题答案" prop="questionAnswer" />
    <el-table-column label="问题热度" prop="questionHot" />
    <el-table-column label="是否启用">
        <!-- 状态按钮 -->
        <template #default="scope" >
            <el-switch 
            :value="1"
            style="--el-switch-off-color: #ff4949"
            size="large"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="switchChange(scope.row)"/>
        </template>
    </el-table-column>
    <el-table-column >
      <template #header>
        操作
      </template>
      <template #default="scope">
        <el-button size="default"
        type="success"
        @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <!-- 编辑页面 -->

  &nbsp;
  <el-dialog v-model="dialogFormVisible1" title="编辑页面">
    <el-form >
      <el-form-item label="问题分类名称" :label-width="formLabelWidth">
        <el-input v-model="f2" autocomplete="off" />
      </el-form-item>      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="fcencel">取消</el-button>
        <el-button type="primary" @click="fenter"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
        <!-- &nbsp; -->
        <el-popconfirm
    confirm-button-text="确定"
    cancel-button-text="否"
    :icon="InfoFilled"
    icon-color="#626AEF"
    title="确定要删除这条吗?"
    @confirm="confirmEvent(scope.$index, scope.row)"
    @cancel="cancelEvent"
  >
    <template #reference>
      <el-button size="default"
          type="danger">删除</el-button>
    </template>
  </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <br>
  <el-config-provider :locale="zhCn">
    <el-pagination background    
          @current-change="handleCurentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next,jumper" 
          :total="pagination.total" />
  </el-config-provider>
</template>


<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
/* .ad{
  position:relative;
  left:305px
} */
/* .ta{
  :cell-style="{padding: 50px}"
} */
</style>